<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>淘抢购</title>
	<style>
		*{margin: 0;padding: 0;box-sizing: border-box;}
		body{
			background-color: #f4f4f4;
		}
		.wrap{
			width: 1200px;
			margin: 0 auto;
			height: 264px;
			background-color: #fff;
		}
		.logo{
			display: flex;
			padding-left: 20px;
		    padding-top: 20px;
		    margin-bottom: 20px;
			justify-content: space-between;
		}
		.logo img{
			height: 22px;
			vertical-align: middle;
		}
		.logo .sp{
			color: #999;
			font-size: 12px;
		}
		.logo .time{
			width: 20px;
			height: 20px;
			color: #ff5000;
			padding: 3px;
			font-size: 12px;
			background-color: #FFE4DC;
		}
		.btn{
			margin-right: 10px;
		}
		button{
			background-color: transparent;
			border: none;
			color: #999;
			font-size: 12px;
			cursor: pointer;
			outline: none;
		}
		.btn a{
			background-color: transparent;
			border: none;
			color: #999;
			font-size: 12px;
			cursor: pointer;
			outline: none;
			text-decoration: none;
		}
		#btn{
			margin-right: 5px;
		}
		#list{
			display: flex;
			flex-wrap: wrap;
		}
		#list .list-item::after{
			clear: both;
			content: "";
			display: block;
		}
		#list .list-item{
			display: block;
			text-decoration: none;
			flex: 0 0 33.333333%;
			width: 355px;
    		padding: 0 20px 0 20px;
		}
		#list div:nth-of-type(1){
			width: 180px;
			height: 180px;
			float: left;
			margin-right: 20px;
		}
		#list h3{
			font-weight: normal;
			margin-top: 11px;
			line-height: 22px;
			height: 44px;
			overflow: hidden;
			font-size: 16px;
			color: #333;
		}
		#list h3,
		#list p{
			/*margin-top: 50px;*/
			/*margin-left: 194px;*/
		}
		#list a > p{
			color: #f40;
			font-size: 21px;
			font-weight: 600;
			margin-top: 10px;
		}
		#list p del{
			font-size: 12px;
			color: #999;
			margin-left: 6px;
			font-weight: 300;
		}
		#list .list-item:hover h3{
			color: #ff5000;
		}
		#list .list-item > div{
			overflow: hidden;
		}
		#list .list-item > div > p:nth-of-type(1){
			color: #999;
			font-size: 12px;
			margin-top: 12px;
			line-height: 28px;
		}
		#list .list-item > div > p:nth-of-type(2){
			font-size: 14px;
			line-height: 28px;
			position: relative;
			color: #FE3338;
		}
		#list .list-item > div > p:nth-of-type(2) span:nth-of-type(2){
			position: absolute;
			right: 0;
		}
		#list .list-item > div > div{
			float: left;
			width: 160px;
			height:6px;
			background-color: #FFE4Dc;
			border-radius: 5px;
		}
		#list .list-item > div > div >div{
			width: 30px;
			height:6px;
			background-color: #FE3338;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="logo">
			<div class="tu-nv">
				<img src="images/logo.png" alt="">
				<span class="sp">据结束</span>
				<span id="s" class="time">00</span> :
				<span id="f" class="time">00</span> :
				<span id="m" class="time">00</span>
			</div>
			<div class="btn">
				<button id="btn">换一换</button>
				<button><a href="">更多 ></a></button>
			</div>
		</div>
		<div id="list"></div>
	</div>
	<script>
	   function GetRTime(){
	       	//结束时间
	       	var EndTime= new Date('2019/9/28 00:00:00');
	       	//当前时间
	       	var NowTime = new Date();
	       	//剩余的时间
	       	var t =EndTime.getTime() - NowTime.getTime();
	       	//获取存放时间的div
			var h1 = document.getElementById("s");
			var s1 = document.getElementById("f");
			var m1 = document.getElementById("m");
	       	var h=Math.floor(t/1000/60/60);//剩下的时
	       	var m=Math.floor(t/1000/60%60);//剩下的分
	       	var s=Math.floor(t/1000%60);//剩下的秒
	       	h <10 ? h = '0' +h :h =h;
	       	m <10 ? m = '0' +m :m =m;
	       	s <10 ? s = '0' +s :s =s;
	       	h1.innerHTML=h;
	       	s1.innerHTML=m;
	       	m1.innerHTML=s;
	       	if(t<=0){
		       	h1.innerHTML="结";
		       	s1.innerHTML="束";
		       	m1.innerHTML="了";
		       	clearInterval(tim);
		    }
	   	}
	   	GetRTime()
	   	var tim = setInterval(GetRTime,1000);










		var page = 1;

		
		document.querySelector("#btn").addEventListener("click",function(){
			if (page<3) {
				page++;
				document.querySelector("#list").innerHTML="";
				load();
			}
			if(page > 2){
				document.querySelector("#btn").style.cursor = 'text'
			}
		})
		function load(){
			var xmlhttp;
			if (window.XMLHttpRequest){
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp=new XMLHttpRequest();
			}else{
				// IE6, IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
					//把获取到的数据，转成数组对象格式，方便js操作
					var json = xmlhttp.responseText;
					json = JSON.parse(json)
					console.log(json)

					for(let i = 0;i<json.shop.length;i++){
						console.log(json.shop[i])
						//创建节点
						var imgdiv = document.createElement("div");
						var img = document.createElement("img");
						//为标签添加内容
						img.src = json.shop[i].pic;
						var h3 = document.createElement("h3");
						h3.innerText = json.shop[i].title;

						var div = document.createElement("div");
						var p2 = document.createElement("p");
						p2.innerHTML = json.shop[i].p2;
						var div2 = document.createElement("div");
						var div3 = document.createElement("div");
						var p3 = document.createElement("p");
						var span2 = document.createElement("span");
						span2.innerHTML = json.shop[i].span2;
						var span3 = document.createElement("span");
						span3.innerHTML = json.shop[i].span3;





						var p = document.createElement("p");
						p.innerHTML = json.shop[i].price;
						var del = document.createElement("del");
						del.innerHTML = json.shop[i].jiage;
						var a = document.createElement("a");
						a.href="#";
						//向div标签追加3个子标签
						imgdiv.appendChild(img)
						a.appendChild(imgdiv)
						a.appendChild(h3);
						div.appendChild(p2);
						div2.appendChild(div3);
						div.appendChild(div2);
						p3.appendChild(span2);
						p3.appendChild(span3);
						div.appendChild(p3);

						a.appendChild(div);


						a.appendChild(p)
						p.appendChild(del)
						console.log(a)
						a.className="list-item"
						//把3个a标签追加到最大的 a#list 标签
						document.querySelector("#list").appendChild(a)
					}
				}
			}
			xmlhttp.open("GET",page+".json",true);
			xmlhttp.send();
		}
		load()
	</script>
</body>
</html>